<template>
  <v-overlay :value="show">
    <v-card
      width="350px"
      light
    >
      <v-card-title>
        <span class="text-h6">举报与投诉</span>
      </v-card-title>
      <v-card-text>
        <v-container>
          <v-row>
            <v-col cols="12" class="pa-0">
              <v-select
                dense
                ref="reason"
                :items="reasons"
                label="举报类型"
                item-value="value"
                item-text="valueName"
                required
                outlined
                :rules="[rules.required]"
                v-model="form.reason"
              ></v-select>
            </v-col>
            <v-col cols="12" class="pa-0">
              <v-textarea
                label="举报理由"
                ref="content"
                outlined
                auto-grow
                counter="100"
                :rules="[rules.required,rules.maxLength(100)]"
                v-model="rawContent"
              >
              </v-textarea>
            </v-col>
            <v-col cols="12" class="pa-0">
                <my-image-upload :image-size="imageSize" @onUpdate="setImg" ref="uploader">

                </my-image-upload>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>

        <v-btn light elevation="0" class="d-flex" color="lighten-4" @click="$emit('dismiss')">取消</v-btn>
        <v-btn light elevation="0" class="d-flex" color="primary" @click="doReport">提交</v-btn>
      </v-card-actions>

      <loading msg="正在提交,请稍候" v-if="committing"></loading>

    </v-card>
  </v-overlay>
</template>

<script>
import {printMsg, rules, utf8_to_b64} from "../util/util";
import MyImageUpload from "./MyImageUpload";
import Loading from "./Loading";

export default {
  name: "NewReport",
  props:['show','id','type'],
  components: {MyImageUpload,Loading},
  data:()=>({
    form:{
      outId:'',
      fromUid:'',
      type:'',
      reason:'',
      content:'',
      pics:''
    },
    rawImgs:'',
    rawContent:'',
    reasons:[],
    rules:rules,
    imageSize:500,
    committing:false,
  }),
  methods:{
    setImg(imgs) {
      this.rawImgs = imgs.new
      printMsg(imgs,this)
    },
    doReport(){
      // 检查表单
      if (!this.$refs['reason'].validate(true) || !this.$refs['content'].validate(true)) {
        return
      }
      // 处理文字
      this.form.content = utf8_to_b64(this.rawContent)

      // 上传图片
      this.committing = true
      if (this.rawImgs.length>0){
        let data = {base64Files: this.rawImgs}
        this.$http.post('file/saveImages', data).then(res => {
          printMsg(res,this)
          this.form.pics = res.data.map(a => a.fileName).join(',')
          this.saveComment()
        }).catch(res => {
          this.committing = false
          this.$emit('toast', res.msg)
        })
      }else{
        this.form.pics=''
        this.saveComment()
      }
    },
    saveComment(){
      this.form.outId = this.id
      this.form.type = this.type
      this.form.fromUid = this.$store.state.uid
      printMsg(this.form,this)
      // 发送请求
      let data = this.form
      this.$http.post('report/addReport', data).then(res => {
        this.committing = false
        this.$emit('toast', "投诉成功")
        this.$emit('dismiss')
        // 清理内容
        this.rawImgs = ''
        this.rawContent = ''
        this.form.reason = ''
        this.$refs['uploader'].clear()
      }).catch(res => {
        this.committing = false
        this.$emit('toast', res.msg)
      })
    },
    getKeyValues(key, store) {
      let data = {
        key: key
      }
      this.$http.post('constant/listConstant', data).then(res => {
        this[store] = res.data[0].values
      }).catch(res => {
        this[store] = []
      })
    },
  },
  mounted() {
    this.getKeyValues('reportReason','reasons')
  }

}
</script>

<style scoped>

</style>
